<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>调试页面</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2.js"></script>
<script>
var data = [
  { time: "周一", tem: 6.9, rain: 10 },
  { time: "周二", tem: 9.5, rain: 13 },
  { time: "周三", tem: 14.5, rain: 14 },
  { time: "周四", tem: 18.2, rain: 10 },
  { time: "周五", tem: 21.5, rain: 12 },
  { time: "周六", tem: 25.2, rain: 16 },
  { time: "周日", tem: 26.5, rain: 13 }
];
var chart = new F2.Chart({
  id: "mountNode",
  width: window.innerWidth,
  height: window.innerWidth * 0.64,
  pixelRatio: window.devicePixelRatio
});

chart.source(data, {
  tem: {
    tickCount: 5,
    max: 30,
    min: 0
  },
  rain: {
    tickCount: 5,
    min: 0,
    max: 30
  }
});

// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis("time", {
  label: {
    fontSize: 14
  },
  grid: null
});
chart.axis("tem", {
  label: {
    fontSize: 14
  }
});
chart.axis("rain", {
  label: {
    fontSize: 14
  }
});
chart.interval().position("time*tem");
chart
  .line()
  .position("time*rain")
  .color("#5ed470")
  .size(2)
  .shape("smooth");
chart
  .point()
  .position("time*rain")
  .color("#5ed470");

chart.guide().line({
  start(xScale, yScales) {
    let sum = 0;

    console.log(xScale, yScales);
    const yScale = yScales[1];
    yScale.values.forEach(v => (sum += 1 - v / 40));
    console.log(sum / yScale.values.length);
    return ["0%", sum / yScale.values.length * 100];
  },
  end(xScale, yScales) {
    let sum = 0;
    const yScale = yScales[1];

    yScale.values.forEach(v => (sum += 1 - v / 40));

    return ["100%", sum / yScale.values.length * 100];
  },
  style: {
    stroke: "#5ed470", // 线的颜色
    lineDash: [0, 2, 2], // 虚线的设置
    lineWidth: 1 // 线的宽度
  } // 图形样式配置
});

chart.render();
</script>
</body>
</html>
